<template>
  <div class="line1">
    <div
      id="line1"
      class=""
      style="width: 90%;height:450px;"
    ></div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/toolbox";
import "echarts/lib/component/markPoint";
import "echarts/lib/component/tooltip";
export default {
  mounted() {
    this.myChart = echarts.init(document.getElementById("line1"));
    this.initData();
  },
  props: ["sevenData", "sevenDay"],
  methods: {
    initData() {
      const colors = ["#5793f3", "#675bba", "#d14a61"];
      const option = {
        color: colors,
        title: {
          text: "当日数据",
          subtext: ""
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["新增用户", "新增绑定设备", "新增测试次数"]
        },
        toolbox: {
          show: true,
          feature: {
            //   dataZoom: {
            //     yAxisIndex: "none"
            //   },
            // dataView: { readOnly: false },
            magicType: { type: ["bar", "line"] }
            //   restore: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.sevenDay
        },
        yAxis: [
          {
            type: "value",
            name: "用户",
            min: 0,
            max: 200,
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          },
          {
            type: "value",
            name: "",
            min: 0,
            max: 200,
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            axisLabel: {
              default: "2",
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "新增用户",
            type: "line",
            data: this.sevenData[0],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" }
                // { type: "min", name: "最小值" }
              ]
            }
          },
          {
            name: "新增绑定设备",
            type: "line",
            data: this.sevenData[1],
            yAxisIndex: 1,
            markPoint: {
              data: [
                // { type: "max", name: "最大值" }
                // { type: "min", name: "最小值" }
              ]
            }
          },
          {
            name: "新增测试次数",
            type: "line",
            data: this.sevenData[2],
            yAxisIndex: 1,
            markPoint: {
              data: [
                // { type: "max", name: "最大值" }
                // { type: "min", name: "最小值" }
              ]
            }
          }
        ]
      };
      this.myChart.setOption(option);
    }
  },
  watch: {
    sevenData: function() {
      this.initData();
    },
    sevenDay: function() {
      this.initData();
    }
  }
};
</script>

<style lang="less">
@import "~@/style/mixin";
.line1 {
  display: flex;
  justify-content: center;
}
</style>
